<template>
	<navBar title="建议"></navBar>
	
	<view class="container">		
		<!-- 建议列表 -->
		<view class="advice-list">
			<view 
				v-for="(item, i) in advices" 
				:key="i" 
				class="advice-card"
				:style="{ 
					backgroundColor: theme.cardColor,
					borderColor: theme.dividerColor
				}"
			>
				<!-- 左侧装饰条 -->
				<view class="card-decoration" :style="{ backgroundColor: theme.accentColor }"></view>
				
				<view class="card-content">
					<!-- 序号和标题 -->
					<view class="card-header">
						<view class="advice-number" :style="{ backgroundColor: theme.accentColor }">
							{{ i + 1 }}
						</view>
						<view 
							class="advice-title"
							:style="{ color: theme.textColor }"
						>
							{{ item.title }}
						</view>
					</view>
					
					<!-- 建议内容列表 -->
					<view class="advice-points">
						<view 
							class="advice-item"
							:style="{ color: theme.subTextColor }"
						>
							<uni-icons type="circle" size="14" class="point-icon" />
							<text>{{ item.advice1 }}</text>
						</view>
						<view
							class="advice-item"
							:style="{ color: theme.subTextColor }"
						>
							<uni-icons type="circle" size="14" class="point-icon" />
							<text>{{ item.advice2 }}</text>
						</view>
						<view
							class="advice-item"
							:style="{ color: theme.subTextColor }"
						>
							<uni-icons type="circle" size="14" class="point-icon" />
							<text>{{ item.advice3 }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态提示 -->
			<view 
				v-if="advices.length === 0" 
				class="empty-state"
				:style="{ color: theme.subTextColor }"
			>
				<view class="empty-icon-container" :style="{ backgroundColor: theme.cardColor }">
					<uni-icons type="info" size="36" />
				</view>
				<text>暂无建议</text>
				<view class="empty-illustration" :style="{ backgroundColor: theme.cardColor }"></view>
			</view>
		</view>
	</view>
	
	<refreshButton></refreshButton>
	<tabBar></tabBar>
</template>

<script>
	import { advices } from '@/stores/advices'
	import { themeColor } from '@/stores/themeColor'
	
	export default {
		data() {
			return {
				isLoading: false
			}
		},
		computed: {
			advices() {
				return advices().advices
			},
			theme() {
				return themeColor().themes[themeColor().currentThemeIndex]
			}
		},
		async created() {
			await advices().getAdvices()
		}
	}
</script>

<style scoped>
	.container {
		min-height: calc(100vh - var(--window-top) - 44px - 50px);
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* 建议列表样式 */
	.advice-list {
		width: 100%;
		flex: 1;
	}
	
	/* 建议卡片样式 */
	.advice-card {
		width: 100%;
		border-radius: 20rpx;
		padding: 0;
		margin-bottom: 25rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.07);
		transition: all 0.3s ease;
		display: flex;
		overflow: hidden;
		position: relative;
	}
	
	.advice-card::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		height: 1px;
		background: linear-gradient(90deg, 
			rgba(0,0,0,0) 0%, 
			rgba(0,0,0,0.05) 50%, 
			rgba(0,0,0,0) 100%);
	}
	
	.advice-card:last-child::after {
		display: none;
	}
	
	.advice-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 左侧装饰条 */
	.card-decoration {
		width: 8rpx;
		flex-shrink: 0;
	}
	
	.card-content {
		flex: 1;
		padding: 30rpx;
	}
	
	/* 卡片标题区域 */
	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.advice-number {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		color: white;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
		flex-shrink: 0;
	}
	
	.advice-title {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 1.3;
	}
	
	/* 建议内容列表 */
	.advice-points {
		padding-left: 55rpx; /* 与序号对齐 */
	}
	
	.advice-item {
		font-size: 28rpx;
		line-height: 1.7;
		margin-bottom: 12rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.advice-item:last-child {
		margin-bottom: 0;
	}
	
	.point-icon {
		margin-right: 12rpx;
		opacity: 0.6;
	}
	
	/* 空状态样式 */
	.empty-state {
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.empty-icon-container {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 25rpx;
		opacity: 0.8;
	}
	
	.empty-illustration {
		width: 200rpx;
		height: 6rpx;
		border-radius: 3rpx;
		position: absolute;
		bottom: 80rpx;
		opacity: 0.1;
	}
	
	/* 加载动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
